/* components */
import NoDataViewNew from '@src/component/common/NoDataViewNew'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useStoreFetchUserList, useStoreRoles, useStoreTableSelection, useStoreUserPage } from "@src/modules/account/roleModule/store/hooks"
import useLoading from '@src/modules/account/roleModule/hooks/useLoading'
/* model */
import Role, { RoleType } from '@model/entity/Role/Role'
/* scss */
import '@src/modules/account/roleModule/component/RoleViewDefaultAllotModal/index.scss'
/* vue */
import { ComponentInstance, computed, ComputedRef, defineComponent, reactive, Ref, ref, toRefs } from 'vue'
import {t} from '@src/locales'

type RoleViewAllotRoleFormType = {
  roleId: string;
}

export type RoleViewDefaultAllotModalProps = {

}

export interface RoleViewDefaultAllotModalSetupState {
  currentSelectRole: ComputedRef<Role>;
  outsideShow: VoidFunction;
  outsideHide: VoidFunction;
}

export enum RoleViewDefaultAllotModalEventEnum {
  Input = 'input',
  Submit = 'submit',
}

export type RoleViewDefaultAllotModalEmitsOptions = {
  input: () => void;
}

export type RoleViewDefaultAllotModalInstance = ComponentInstance & RoleViewDefaultAllotModalSetupState
export type RoleViewDefaultAllotModalVM = RoleViewDefaultAllotModalSetupState & RoleViewDefaultAllotModalProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleViewDefaultAllotModal,
  emits: [
    RoleViewDefaultAllotModalEventEnum.Input,
    RoleViewDefaultAllotModalEventEnum.Submit,
  ],
  components: {
    [NoDataViewNew.name]: NoDataViewNew
  },
  setup(props: RoleViewDefaultAllotModalProps, { slots, emit }) {
    
    const { roles } = useStoreRoles()
    
    const RoleViewAllotRoleFormComponent: Ref<any> = ref(null)
    
    const visible = ref(false)
    
    const form: RoleViewAllotRoleFormType = reactive({
      roleId: ''
    })
    
    const fullRoles: ComputedRef<RoleType[]> = computed(() => {
      return [{ id: '0', name: t('account.managerAppoint') } as RoleType].concat(roles.value)
    })
    
    function onAllotRoleModalCloseHandler() {
      hide()
      resetRoleViewAllotModalFormFields()
    }
    
    function resetRoleViewAllotModalFormFields() {
      RoleViewAllotRoleFormComponent.value?.resetFields()
    }
    
    function onFormRoleIdListInputHandler(roleId: string) {
      form.roleId = roleId
    }
    
    function onFormSubmitHandler() {
      emit(RoleViewDefaultAllotModalEventEnum.Submit, form.roleId)
    }
    
    function outsideShow() {
      visible.value = true
    }
    
    function outsideHide() {
      hide()
    }
    
    function hide() {
      visible.value = false
    }
    
    return {
      form: toRefs(form),
      visible,
      roles,
      fullRoles,
      onFormSubmitHandler,
      onAllotRoleModalCloseHandler,
      resetRoleViewAllotModalFormFields,
      onFormRoleIdListInputHandler,
      RoleViewAllotRoleFormComponent,
      outsideShow,
      outsideHide
    }
    
  },
  render() {
    
    const attrs = {
      on: {
        'update:visible': (val: boolean) => {
          this.visible = val
        }
      }
    }
    
    return (
      <div class={ComponentNameEnum.RoleViewDefaultAllotModal}>
        
        <el-dialog
          title={t('common.base.allotDefaultAccount')}
          width="400px"
          {...attrs}
          visible={this.visible}
          close={this.onAllotRoleModalCloseHandler}
        >
          
          <div>
            <label class="el-form-item__label">
              {t('account.newUserDefaultRoleOrAllot')}
            </label>
          </div>
          
          <el-form label-position="top" model={this.form} ref="RoleViewAllotRoleFormComponent">
            <el-select
              value={this.form.roleId.value}
              onInput={this.onFormRoleIdListInputHandler}
              placeholder={t('common.placeholder.selectRole')}
              style="width:100%;"
            >
              {this.fullRoles.map(role => {
                return (
                  <el-option
                    label={role.name || ''}
                    value={role.id}
                    key={role.id}
                  >
                  </el-option>
                )
              })}
            </el-select>
          </el-form>
          
          <span slot="footer" class="dialog-footer">
            <el-button onClick={this.onAllotRoleModalCloseHandler}>
              {t('account.cancel')}
            </el-button>
            
            <el-button
              type="primary"
              onClick={this.onFormSubmitHandler}
            >
              {t('account.confirm')}
            </el-button>
          </span>
          
        </el-dialog>
      </div>
    ) as any
  }
}) as any
